<!-- 
 1.插槽的基本使用 slot
 2.插槽的默认值 <slot>button</slot> 
 3.插槽中如果有多个值,同时放入到组件进行替换时,一起作为替换元素
 
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn><button>案例1</button></cpn>
			<cpn><button>案例2</button></cpn>
			<cpn><a href="http://www.baidu.com">案例3</a></cpn>
		</div>
		
	</body>
	<template id="cpn">
		<div>
			<h2>我是组件</h2>
			<p>我是组件哈哈哈</p>
			<!-- slot标签中什么都不写就是没有默认的标签,相当于空 -->
			<!-- <slot></slot> -->
			<!-- 默认slot中当在模板标签中没有,slot中就会显示出来 -->
			<slot><button type="button">默认</button></slot>
		</div>
	</template>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const cpn = {
			template: "#cpn",
			
		}
		const app = new Vue({
			el : "#app",
			data:{
				
			},
			components:{
				cpn
			}
		})
	</script>
</html>
